<template>
    <div class="ct-product">
        <div class="image">
            <img :src="product.image" :alt="product.name" :class="{gray: product.inventory <= 0}">
        </div>
        <div class="inner">
            <input type="hidden" :value="product.id"/>
            <a href="#" class="btn btn-motive ct-product-button" @click.prevent="addToCart(product)">
                <i class="fa fa-shopping-cart"></i>
            </a>
            <h2 class="ct-product-title">{{product.name}}</h2>
            <p class="ct-product-description">{{product.description}}</p>
            <span class="ct-product-price"></span>
            <span class="ct-product-price">库存：{{product.inventory}}</span>
            <span class="ct-product-price">价格{{currency(product.price)}}</span>
        </div>
    </div>
</template>

<script>
    import format from '@cart/js/currency.js'
    import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
export default {
    data: function () {
        return {
        }
    },
    props: {
        product: {
            required: true,
            type: Object
        }
    },
    methods: {
        currency: format,
        ...mapActions(['addToCart'])
    }
}
</script>

<style>
    .gray {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);

        filter: grayscale(100%);

        filter: gray;
    }
</style>
